import Taro, {Component} from "@tarojs/taro";
import {View, Image, Input, Picker, Button, Form} from "@tarojs/components";
import { AtIcon } from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getAvatar, getRuntime, userSexArr} from '../../utils/common'
import './edit.less'

import right from "../../assets/img/right.png";
import avatar from "../../assets/img/icon_79.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userSexArr,
    currentSex: 2, // 保密, 用户性别编码
    avatar: '', // 用户显示
    avatarSave: '', // 用户保存
    userInfo:{}
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '编辑资料'})
    this.getUserInfo()
  }

  getUserInfo() {
    let { userStore } = this.props.stores
    userStore.getUserInfo({
      callback: res => {
        this.setState({
          userInfo: res,
          avatar: res.avatar,
          avatarSave: res.avatar,
          currentSex: res.userSex || 2
        })
      }
    })
  }

  changeAvatar(e) {
    Taro.chooseImage({
      sourceType: ['album', 'camera'],
      count: 1,
    }).then(res => {
      getRuntime().uploadFile([{ file:{path:res.tempFilePaths }}], (url) => {
        this.setState({
          avatar: url[0],
          avatarSave: url[0]
        })
      })
    }).catch(() => {
      getRuntime().showToast('上传文件失败，请稍后重试~')
    })
  }

  changePicker(e){
    this.setState({
      currentSex: e.detail.value
    })
  }

  submit(e){
    let { userStore } = this.props.stores
    let { name } = e.detail.value
    let { avatarSave,currentSex,userSexArr } = this.state
    if(!avatarSave){ getRuntime().showToast('请上传用户头像~'); return}
    if(!name){ getRuntime().showToast('昵称不能为空~'); return}
    userStore.modifyUser({
      form: {
        name,
        avatar: avatarSave,
        userSex: currentSex
      },
      callback: () => {
        // 重新获取用户信息并缓存
        userStore.getUserInfo({
          callback: res => {
            res.token = getRuntime().getUserInfo().token
            getRuntime().setUserInfo(res) }
        })
        getRuntime().showToast('保存成功,即将返回~')
        setTimeout( () => {
          getRuntime().navigateBack()
        }, 1000)
      }
    })
  }

  render() {
    let { userSexArr,currentSex,avatar,userInfo } = this.state
    return (
      <View className='my-my_edit'>
        <Form onSubmit={this.submit.bind(this)}>
        <View className='header' onClick={this.changeAvatar.bind(this)}>
          <Image src={getAvatar(avatar)} className='my-bg' />
          <View className='list-title'>点击更换头像</View>
        </View>

        <View className='form-wrap content-30'>
          {/*输入框*/}
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>昵称</View>
            <View className='form-wrap__content'>
              <Input className='input' name='name' value={userInfo.name} placeholderClass='placeholder-class' placeholder='请输入昵称' />
            </View>
          </View>
          {/*选择框*/}
          <View className='form-wrap__group bbnone'>
            <View className='form-wrap__title'>性别</View>
            <View className='form-wrap__content form-wrap__select'>
              <Picker className='select'  mode='selector' range={userSexArr} onChange={this.changePicker.bind(this)}
                      value={userSexArr[currentSex]}
                      name='userSex'
              >
                <View className='select' style={{display:'flex'}}>
                  <View className='select'>{userSexArr[currentSex]}</View>
                  <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1' />
                </View>
              </Picker>
            </View>
          </View>
        </View>
        <Button className='circular-submit' formType='submit' style={{marginTop: '30px'}}>保存</Button>
        </Form>
      </View>
    )
  }
}

export default Company
